<template>
  <div>
    <el-row>
      <el-col :md="{span: 24}" :lg="{span: 18, offset: 0}">
        <el-row>
          <el-col :md="{span: 24}" :lg="{span: 11, offset: 0}">
            <el-card class="char-card">
              <div id="charTest" :style="{width: '100%', height: '400px'}"></div>
            </el-card>
          </el-col>
          <el-col :md="{span: 24}" :lg="{span: 11, offset: 1}">
            <el-card class="char-card">
              <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :md="{span: 24}" :lg="{span: 6, offset: 0}">
        <el-card class="list-card">
          <div slot="header" class="clearfix">
            <span style="line-height: 36px;">消息队列</span>
          </div>
          <div v-for="o in 10" :key="o" class="text item">
            {{'列表内容 ' + o }}
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {AutoVue} from '~/plugins/Tools';
  export default AutoVue({
    transition: 'slide-fade',
    methods: {
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$el.querySelector('#charTest'));
        // 绘制图表
        myChart.setOption({
          title: { text: '总出库' },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          }],
        });
      },
    },
    mounted () {
      // this.drawLine();
    },
  });
</script>
<style lang="scss">
  $cardMargin: 0 5%;
  $cardMarginTop: 20px;

  .char-card {
    width: 90%;
    margin: $cardMargin;
    margin-top: $cardMarginTop;
  }
  .list-card {
    width: 90%;
    margin: $cardMargin;
    margin-top: $cardMarginTop;
  }
</style>
